<!-- modal-content -->
<div class="preference-modal-component">
  <div class="modal-header preference-modal-header">
    <h6 class="preference-modal-title" id="preference-modal-title">
      Currency settings
    </h6>
    <!--  variable.other.object.js
          meta.function-call.js
          source.js
          string.quoted.double.html
          meta.embedded.line.js
          meta.attribute.event-handler.click.html
          meta.tag.inline.i.start.html
          text.html.derivative -->
    <i
      onclick="ModalComponentCtrl.cancel()"
      class="close glyphicon glyphicon-remove preference-modal-title-icon"
      aria-label="Close"
      ng-click="ModalComponentCtrl.cancel()"
    >
      <!--  string.quoted.double.html
            meta.attribute.unrecognized.ng-click.html
            meta.tag.inline.i.start.html
            text.html.derivative -->
    </i>
  </div>
  <div class="preference-modal-body" id="preference-modal-body">
    <div class="preference-modal-body-subtitle1">
      <i class="link-icon-index-home-fill"></i>
      <span class="preference-modal-body-subtitle1-content"
        >Site browsing currency</span
      >
    </div>
    <div class="preference-modal-body-body2">
      <span> How you see QPMN product and other prices on this website. </span>
    </div>
    <!-- TODO: dropdown -->
    <div
      uib-dropdown
      class="preference-modal-body-dropdown"
      is-open="$dropdownModal.status.isOpen"
    >
      <div
        type="button"
        class="single-button preference-modal-body-dropdown-toggle"
        uib-dropdown-toggle
      >
        <!-- 这个名字比 style本身 还长 -->
        <div class="preference-modal-body-dropdown-body">
          <span class="abbreviation">
            {{ModalComponentCtrl.selected.item.title}}
          </span>
          <span class="bar">|</span>
          <span class="origin-info">
            {{ModalComponentCtrl.selected.item.content}}
          </span>
        </div>
        <div>
          <span class="caret"></span>
        </div>
      </div>
      <ul
        uib-dropdown-menu
        role="menu"
        aria-labelledby="single-button"
        class="preference-modal-body-dropdown-menu"
      >
        <li
          class="dropdown-menuitem override"
          role="menuitem"
          ng-repeat="item in ModalComponentCtrl.items track by $index"
        >
          <a
            href="javascript:void(0);"
            ng-click="ModalComponentCtrl.selected.item = item;"
          >
            <span class="abbreviation">{{ item.title }}</span>
            <span class="bar">|</span>
            <span class="origin-info">{{ item.content }}</span>
          </a>
        </li>
        <!-- TODO: Remove -->
        <li role="menuitem">
          <a
            href="javascript:void(0);"
            ng-click="ModalComponentCtrl.selected.item = null;"
            >reset</a
          >
        </li>
      </ul>
    </div>
  </div>
  <div class="modal-footer">
    <button
      class="btn"
      type="button"
      ng-click="ModalComponentCtrl.handleClick()"
    >
      handleClick
    </button>
    <button
      class="btn btn-info"
      type="button"
      ng-click="ModalComponentCtrl.ok()"
      class="apply-button"
    >
      Apply
    </button>
  </div>
</div>
